
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script src="js/jquery.min.js"></script>
<script src="js/colyseus.js"></script>

<script type="text/javascript">
	

</script>
<style type="text/css">
	*{margin:0;padding:0;}
	img{border:none;vertical-align:top;}
	html,body{width:100%;height:100%;overflow:hidden;}
	
	div,img{
		margin: 0;
		padding: 0;
		border: 0 none;
		outline: 0px;
		tap-highlight-color: rgba(0,0,0,0);
		focus-ring-color: rgba(0, 0, 0, 0);
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-focus-ring-color: rgba(0, 0, 0, 0);
		-moz-tap-highlight-color: rgba(0,0,0,0);
		-moz-focus-ring-color: rgba(0, 0, 0, 0);
	}


	body {
		background-color: #f88b3e;
	}

	h1 {
		color: #fff;
		text-align: center;
		text-shadow: 0 0 3px #ff3a17;
	}

</style>
</head>
<body>
	<div id="messagelist" style="width: 100%; height: 50%; position: fixed; top: 0; left: 0; font-size: 12px; overflow-y: scroll; color: #ffffff;">test</div>
	
	<div style="position: fixed;width:50%;left:40%;bottom:10%;">
		<input type="text" name="msg" id="msg" style="color:#ffffff;width: 180px; height: 35px;padding-left:10px;padding-right:10px;margin-right:20px;background:url('images/input-bg.png');background-size:100% 100%;border:0 none;outline:none;" /><img id="sendBtn" src="images/fasong.png" height="30" />
	</div>

	<div id="div_loading" style="position: fixed;width:100%;height:100%;background:#000;opacity:0.5;top:0px;left:0px;"></div>
	
	<script type="text/javascript">
		function setTouch() {
			var touch = {};

			/*
			 * Joystick
			 */
			touch.joystick = {};
			touch.joystick.active = false; // time tick

			touch.joystick.$element = document.createElement("div");
			touch.joystick.$element.style.position = "fixed";
			touch.joystick.$element.style.bottom = "10px";
			touch.joystick.$element.style.left = "10px";
			touch.joystick.$element.style.width = "170px";
			touch.joystick.$element.style.height = "170px";
			touch.joystick.$element.style.borderRadius = "50%";
			document.body.appendChild(touch.joystick.$element);

			touch.joystick.$cursor = document.createElement("div"); // 游标
			touch.joystick.$cursor.style.width = "60px";
			touch.joystick.$cursor.style.height = "60px";
			touch.joystick.$cursor.style.position = "absolute";
			touch.joystick.$cursor.style.top = "calc(50% - 30px)";
			touch.joystick.$cursor.style.left = "calc(50% - 30px)";
			//touch.joystick.$cursor.style.backgroundColor = "#fff";
			//touch.joystick.$cursor.style.opacity = "0.2";
			touch.joystick.$cursor.style.borderRadius = "50%";
			touch.joystick.$cursor.style.background = "url(images/bar.png) no-repeat";
			touch.joystick.$cursor.style.backgroundSize = "100% 100%";
			touch.joystick.$element.appendChild(touch.joystick.$cursor);

			touch.joystick.$limit = document.createElement("div"); // 限制框
			touch.joystick.$limit.style.position = "absolute";
			touch.joystick.$limit.style.width = "150px";
			touch.joystick.$limit.style.height = "150px";
			touch.joystick.$limit.style.top = "calc(50% - 77px)";
			touch.joystick.$limit.style.left = "calc(50% - 77px)";
			touch.joystick.$limit.style.borderRadius = "50%";
			//touch.joystick.$limit.style.border = "2px solid #fff";
			touch.joystick.$limit.style.background = "url(images/barbg.png) no-repeat";
			touch.joystick.$limit.style.backgroundSize = "100% 100%";
			//touch.joystick.$limit.style.opacity = "1";
			//touch.joystick.$limit.style.transition = "opacity 0.3 0.0";
			touch.joystick.$element.appendChild(touch.joystick.$limit);

			// angle
			touch.joystick.angle = {};

			touch.joystick.angle.center = {};
			touch.joystick.angle.center.x = 0;
			touch.joystick.angle.center.y = 0;

			touch.joystick.angle.current = {};
			touch.joystick.angle.current.x = 0;
			touch.joystick.angle.current.y = 0;

			function resize() {
				var boundings = touch.joystick.$element.getBoundingClientRect();

				touch.joystick.angle.center.x = boundings.left + boundings.width * 0.5;
				touch.joystick.angle.center.y = boundings.top + boundings.height * 0.5;
			}
			resize();

			// time tick
			function render() {
				if (touch.joystick.active) {
					// active
					// calculate angle
					touch.joystick.angle.value = Math.atan2(
						touch.joystick.angle.current.y - touch.joystick.angle.center.y,
						touch.joystick.angle.current.x - touch.joystick.angle.center.x
					);

					//update joystick
					const distance = Math.hypot(
						touch.joystick.angle.current.y - touch.joystick.angle.center.y,
						touch.joystick.angle.current.x - touch.joystick.angle.center.x
					);

					let radius = distance;
					if (radius > 43) {
						radius = 43;
					}

					


					const cursorX = radius * Math.cos(touch.joystick.angle.value);
					const cursorY = radius * Math.sin(touch.joystick.angle.value);

					_x = cursorX>0?1:(cursorX<0?-1:0);
					_y = cursorY>0?1:(cursorY<0?-1:0);

					
					console.log("x",_x,"y",_y,"l",radius);
					send_yaogan(_x,_y)
					touch.joystick.$cursor.style.transform = `translateX(${cursorX}px) translateY(${cursorY}px)`;
				}

				requestAnimationFrame(render);
			}
			render();

			// Events
			touch.joystick.events = {};
			touch.joystick.touchIdentifier = null;

			touch.joystick.events.touchstart = (_event) => {
				touch.joystick.touched = true;

				const _touch = _event.changedTouches[0];

				if (_touch) {
					touch.joystick.touchIdentifier = _touch.identifier;

					touch.joystick.$limit.style.opacity = "0.7";
					touch.joystick.$cursor.style.opacity = "0.7";

					touch.joystick.angle.current.x = _touch.clientX;
					touch.joystick.angle.current.y = _touch.clientY;

					document.addEventListener("touchend", touch.joystick.events.touchend);
					document.addEventListener("touchmove", touch.joystick.events.touchmove, {
						passive: false
					});
				}
			};

			touch.joystick.events.touchmove = (_event) => {
				const touches = [..._event.changedTouches];
				const _touch = touches.find(
					(__touch) => __touch.identifier === touch.joystick.touchIdentifier
				); //  find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

				if (_touch) {
					touch.joystick.active = true;

					touch.joystick.angle.current.x = _touch.clientX;
					touch.joystick.angle.current.y = _touch.clientY;
					
				}
			};

			touch.joystick.events.touchend = (_event) => {
				const touches = [..._event.changedTouches];
				const _touch = touches.find(
					(__touch) => __touch.identifier === touch.joystick.touchIdentifier
				);

				if (_touch) {
					touch.joystick.active = false;

					//touch.joystick.$limit.style.opacity = "0.2";
					//touch.joystick.$cursor.style.opacity = "0.2";

					touch.joystick.$cursor.style.transform = `translateX(0px) translateY(0px)`;

					document.removeEventListener("touchend", touch.joystick.events.touchend);
					document.removeEventListener("touchmove", touch.joystick.events.touchmove, {
						passive: false
					});
				}
			};

			touch.joystick.$element.addEventListener(
				"touchstart",
				touch.joystick.events.touchstart,
				{ passive: false }
			);

			
		}

		

		$(function(){
			setTouch();
			setTimeout(function(){
				$('#div_loading').hide();
			},1000);
		});
	</script>
</script>

<script>
var client = new Colyseus.Client('wss://colyseus.fjsfs.cn');
var room;
let _name;
var room_name = "cloudTest";
/* 加入房间*/

var nickname_val = "";
for(var i=1;i<=6;i++){
	var zimu = getUpperCharacter();
	nickname_val += zimu;
}

client.joinOrCreate(room_name).then((r) => {
	room = r
	addListeners(room);

	room.onStateChange((state) => {
		console.log(room.name, "has new state:", state._custom);
		thisLog("欢迎 "+state._custom+" 加入。");
	});

	var json_val = {nickname:nickname_val};
	room.send("PlayerJoined", json_val);

});


function thisLog(str){
	console.log(str);
	$("#messagelist").append("<br>"+str);
}

function addListeners (room) {
	  console.log('joined!');
	  room.onMessage("*", (type, message) => {
		  console.log("received message:", type, "=>", message);
	  });

	  room.onLeave(function() {
		  console.log("LEFT ROOM", arguments);
	  });

	  room.onStateChange(function(state) {
		  console.log("state change: ", state.toJSON());
	  });
  }


$("#sendBtn").click(function(){
	var msg_val = $('#msg').val();
	var json_val = {msg:msg_val};
	room.send("ChatMsg", json_val);
});

function send_yaogan(x_val,y_val){
	var json_val = {dir:{x:x_val,y:y_val}};
	room.send("ActorMove", json_val);
}


function getCharacter(flag){
	var character="";
	if(flag==="lower"){
		character = String.fromCharCode(Math.floor(Math.random()*26)+"a".charCodeAt(0));
	}
	if(flag==="upper"){
		character = String.fromCharCode(Math.floor(Math.random()*26)+"A".charCodeAt(0));
	}
	return character;
} 

function getUpperCharacter(){
	return getCharacter("upper");
}

function getLowerCharacter(){
	return getCharacter("lower");
}
</script>
</body>
</html>